import React, { Component } from 'react'


import { Link, NavLink } from 'react-router-dom';
import { Route, withRouter, Redirect, Switch } from 'react-router-dom';
import Home from './Home';
import Categoty from './Categoty'
import Car from './Car';
import Mine from './Mine';
import NotFind from './NotFind';
import './Father.css';

// 引入自定义导航组件
import MyNav from '../../components/MyNav';

class Father extends Component {
    state = {
        id: 999,
        name: '林正英',
        age: 50
    }
    render() {
        return (
            <>
                {/* 声明式导航 */}
                {/* <div>
                    <NavLink to='/home'>首页</NavLink>
                    <NavLink to='/category'>分类</NavLink>
                    <NavLink to='/car'>购物车</NavLink>
                    <NavLink to='/mine'>我的</NavLink>
                </div> */}

                {/* 自定义导航组件-子组件 */}
                <div>
                    <MyNav to='/home' tag='p'>首页</MyNav>
                    <MyNav to='/category'>分类</MyNav>
                </div>
                {/* 路由匹配规则及显示的组件 */}
                <Switch>
                    <Route path='/home' component={Home}></Route>
                    <Route path='/category' component={Categoty}></Route>
                    <Route path='/car' component={Car}></Route>
                    <Route path='/mine' component={Mine}></Route>
                </Switch>
            </>
        )
    }
}

export default withRouter(Father)
